<template>
	<view class="custom">
		<u-navbar 
			:title="onlineAudit ? '回收列表' : '卡券列表'" 
			:bg-color="`${mainColor}`" 
			fixed 
			autoBack
			placeholder 
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"/>
		<view class="header">
			<view class="search-service flex-b">
				<view class="input-search-box" @click.prevent="clickSearch">
					<view class="search-img">
						<u-icon name="search" color="#606266" size="20"></u-icon>
					</view>
					<input class="input-search" placeholder="请输入您要回收的产品" />
					<view class="search-btn">搜索</view>
				</view>
				<view class="service-fu-btn" @click="clickKefu" v-if="!onlineAudit">
					<u-icon name="kefu-ermai" color="#333" size="20"></u-icon>
				</view>
			</view>
		</view>
		<view class="content-box flex-a">
			<scroll-view 
				scroll-y 
				enable-back-to-top 
				:style="{flex: '1 1 0%', height: `calc(100vh - 56px - ${navHight}px)`, backgroundColor: `${bgColor}`,
						borderRadius: '0 20px 20px 0'}">
				<view class="left-box">
					<view :class="{'class-active': selection.id === item.id, 'left-item': true,
						'prev-item': (index == selectIndex-1), 'next-item': (index == selectIndex+1),
						'first-prev-item': (index == 0) && (selectIndex > 1), 'second-prev-item': (index == 0) && (selectIndex == 1)}"
						 v-for="(item, index) in categories" :key="index"
						@click="clickCategory(index, item)">{{item.name}}</view>
					<view class="item-space" :style="{borderRadius: selectIndex == categories.length-1 ? '0 20px 20px 0' : '0 0 20px 0'}"></view>
				</view>
			</scroll-view>
			<scroll-view 
				scroll-y 
				@scroll="scrollChanged"
				:scroll-top="scrollTop"
				:scroll-with-animation="scrollAnimation"
				enable-back-to-top 
				:style="{flex: '3 1 0%', height: `calc(100vh - 56px - ${navHeight}px)`}">
				<view class="right-box">
					<view class="item-list">
						<view class="right-item" v-for="(item, index) in selection.cards" :key="index"
							@click="clickCard(item)">
							<image class="item-img" :src="baseUrl(item.icon)"></image>
							<view class="item-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { customerService } from '@/utils/service';
	import { baseUrl, getCategories } from '@/api';
	import { systemInfo } from '@/utils/mixin';
	import {mapState, mapGetters} from "vuex";
	
	export default {
		mixins: [systemInfo],
		data() {
			return {
				baseUrl,
				selection: {},
				selectIndex: 0,
				categories: [],
				lastScrollY: 0,
				scrollTop: 0,
				scrollAnimation: true
			}
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			uni.hideTabBar();
			// #endif
			this.getSystemInfo();
			this.loadCategories();
		},
		computed: mapState(['onlineAudit']),
		methods: {
			async loadCategories() {
				const res = await getCategories();
				this.categories = res.data;
				if (this.categories.length > 0) {
					this.selection = this.categories[this.selectIndex];
				}
			},
			clickSearch() {
				uni.navigateTo({
					url:'/pages/search/index'
				});
			},
			clickKefu() {
				customerService.openChat();
			},
			clickCategory(index, item) {
				this.selectIndex = index;
				this.selection = item;
			},
			scrollChanged(e) {
				this.lastScrollY = e.detail.scrollTop;
			},
			clickCard(item) {
				uni.navigateTo({
					url:`/pages/detail/index?categoryId=${this.selection.id}&cardId=${item.id}`
				})
			}
		},
		watch: {
			selection: function(value) {
				this.scrollAnimation = false;
				this.scrollTop = this.lastScrollY
				this.$nextTick(function(){
					this.scrollTop = 0;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
    background-color: #fff;
    overflow: hidden;
}

.header {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: $bg-color;
	.search-service {
		display: flex;
		.input-search-box {
			flex: 1;
			border-radius: 99px;
			background: #fff;
			display: flex;
			align-items: center;
			
			.search-img {
				margin-top: 8px;
				margin-bottom: 6px;
				margin-left: 12px;
				margin-right: 4px;
			}
		
			.input-search {
				flex: 1;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 16.46px;
			}
		
			.search-btn {
				margin: 4px;
				padding: 4px 14px;
				border-radius: 40px;
				font-size: 14px;
				background: $main-color;
				text-align: center;
			}
		}
		
		.service-fu-btn {
			width: 35px;
			height: 35px;
			margin-left: 7px;
			box-shadow: 0 0 3px 1px rgba(0, 0, 0, .1);
			border-radius: 100%;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: center;
		}
	}
}

.left-box {
    width: 104px;
	display: flex;
	flex-direction: column;
	height: 100%;
	
	.left-item {
	    width: 102px;
	    height: 31px;
	    padding: 10px 0;
	    line-height: 31px;
	    text-align: center;
	    font-size: 16px;
		background-color: #fff;
	    border-left: 3px solid #fff;
	}
	
	.class-active {
	    font-weight: 500;
		background-color: $bg-color;
	    border-left: 3px solid $main-color;
	}
	
	.prev-item {
		border-radius: 0 0 20px 0;
	}
	
	.next-item {
		border-radius: 0 20px 0 0;
	}
	
	.first-prev-item {
		border-radius: 0 20px 0 0;
	}
	
	.second-prev-item {
		border-radius: 0 20px 20px 0 !important;
	}
	
	.item-space {
		background-color: #fff; 
		flex:1;
	}
}

.right-box {
    font-size: 12px;
	margin: 0 10px 10px 10px;
    padding-bottom: 10px;
	background: #fff;
	border-radius: 20px;
	
	.item-list {
	    flex-wrap: wrap;
	    display: flex;
	    padding-top: 20px;
		
		.right-item {
		    display: flex;
		    align-items: center;
		    flex-direction: column;
		    width: 33.3%;
		    padding: 10px 0;
			
			.item-img {
			    width: 41px;
			    height: 41px;
			    border-radius: 6px;
			}
			
			.item-name {
			    padding: 4px;
			    text-align: center;
			    box-sizing: border-box;
			}
		}
	}
}
</style>
